<script setup>
  import { ref } from 'vue'
  import MyTable from './components/MyTable.vue'
  const tableData1 = ref([
    { id: 11, name: '狗蛋', age: 18 },
    { id: 22, name: '⼤锤', age: 19 },
    { id: 33, name: '铁棍', age: 17 },
  ])
  const tableData2 = ref([
    { id: 21, name: 'Jack', age: 18 },
    { id: 32, name: 'Rose', age: 19 },
    { id: 43, name: 'Henry', age: 17 },
  ])

  // 删除元素
  const onDel = (i, arr) => {
    // console.log(i);
    // tableData1.value.splice(i, 1)
    // console.log(arr, tableData1);
    // 为什么 arr 不用添加 value，因为 tableData1那时候不用添加 value 就可以取到数组，所以传进来的时候也是不用添加 value
    window.confirm('确认要删除么？') && arr.splice(i, 1)
  }

  // 显示元素
  const onShow = (i, arr) => {
    alert(JSON.stringify(arr[i]))
  }
</script>
<template>
  <p></p>
  <MyTable :data="tableData1">
    <!-- 通过作用域插槽来获得 下标 -->
    <template #default="{ i }">
      <button @click="onDel(i, tableData1)">删除</button>
    </template>
  </MyTable>
  <MyTable :data="tableData2">
    <template #default="{ i }">
      <button
        @click="onShow(i, tableData2)"
        :a="1"
      >查看</button>
    </template>
  </MyTable>
</template>l
<style>
  body {
    background-color: #fff;
  }
</style>